Chips Guidelines 標籤小元件指導規則

Usage 用法

元件是一個簡單的選擇工具，幫助使用者進行選擇、輸入和篩選。它的設計目的是讓使用者可以更輕鬆地完成操作。

Chips aren’t buttons 元件並非按鈕

元件和按鈕雖然外觀相似，但功能不同。按鈕是固定在頁面上的，用來完成具體操作。而元件是動態的，會根據使用者的操作顯示不同的選項。記住一個簡單規則：想讓使用者選擇或篩選內容時用元件，想讓使用者完成操作時用按鈕。

元件應根據當前任務動態提供各種操作，而按鈕應是佈局中的固定元素。元件代表當前任務的分支路徑，而按鈕代表線性步驟。

多個元件應成組出現，而單個排列中的按鈕不應超過 3 個。元件可以水平滾動。

Types 型別

1 Assist 輔助 2 Filter 過濾 3 Input 輸入 4 Suggestion 建議

Purpose 用途	Component Type 元件型別	Rationale 設計原理	Example 示例
動作操作（Action）	智慧操作標籤（Assist Tag）	表示可跨多個應用執行的智慧或自動化操作。	“新增到日曆”操作
篩選功能（Filter）	篩選標籤（Filter Tag）	表示對一組內容進行篩選的選項。	Material Design 官網的“平臺選擇器”
使用者輸入資訊（User-authored Info）	輸入項（Input Item）	表示使用者手動輸入的獨立資訊片段。	Gmail 中“收件人”欄位的聯絡人
系統建議資訊（Product-authored Info）	建議項（Suggestion Item）	系統自動生成建議項，幫助使用者縮小選擇範圍。	聊天中的推薦回覆

Anatomy 結構

1 Container 2 Label text 3 Leading icon or image (optional) 4 Trailing icon (required for input chips, optional for filter chips)

Container 容器

Shadows and elevation 陰影與凸起效果

如果元件容器放置在影象或動態背景之上，可以呈現出凸起效果。預設是透明的。當凸起時，它們會呈現出表面容器的低色調角色。

Label text 標籤文字

元件標籤文字應不超過 20 個字元，且排版樣式應與按鈕相同。由於可用空間有限，元件標籤應保持簡短。為節省空間，可跳過常規語法規則，比如冠詞（如“去散個步”中省略“a” ）。

Leading icon or image (optional)前置圖示或影象（可選）

元件可以在左側顯示圖示、徽標或圓形圖片。建議使用系統圖示，這樣可以讓使用者更容易理解元件的功能。

一般預設使用主色，但如果想讓圖示看起來不那麼突出，也可以選擇更柔和的顏色。

圓形影象要比圖示大一些，這樣可以更好地顯示圖片細節。即使圖示很小，也要確保它們清晰易辨。。

Trailing icon 尾部圖示

輸入元件必須包含一個用於刪除的尾部圖示。過濾元件可以選擇新增尾部圖示，用來開啟選單或刪除元件。為了方便使用者操作，所有次要功能（比如刪除按鈕）都需要有 48x48dp 的點選區域。這些功能不應影響主要操作（如編輯或拖動）。為了達到這個要求，元件的最小寬度應為 88dp，或者標籤文字的最小寬度應為 42dp。